<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://www.hx.com/tags" prefix="hx" %>
<%   String path = request.getContextPath();   
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>刮刮卡</title>
		<hx:ajax jquery="true"/>
		<link href="/games/ggl/file/activity-style.css" rel="stylesheet" type="text/css">
	</head>
	</head>
	<body data-role="page" class="activity-scratch-card-winning">
		<script src="/games/ggl/file/jquery.js" type="text/javascript"></script>
		<script src="/games/ggl/file/wScratchPad.js" type="text/javascript"></script>
		<div class="main">
			<div class="cover">
				<img src="/games/ggl/file/activity-scratch-card-bannerbg.png">
				<div id="prize">
				</div>
				<div id="scratchpad">
				</div>
			</div>
			<div class="content">
				<div id="zjl" style="display:none" class="boxcontent boxwhite">
					<div class="box">
						<div class="title-red" style="background-color: red">
							<span>
								恭喜你中奖了
							</span>
						</div>
						<div class="Detail">
							<p>
								你中了：
								<span class="red" id="prizeItem">
									
								</span>
							</p>
							<p>
								兑奖SN码：
								<span class="red" id="sncode">
									
								</span>
							</p>
							<p class="red"></p>
							<p>
								手机号：<input name="" class="px" id="tel" value="" type="number"   placeholder="用户请输入您的手机号">
							</p>
							<p>
								<p>
									<input class="pxbtn" name="提 交" id="save-btn" type="button" value="用户提交">
								</p>
								<!-- <p>
									<input name="" class="px" id="parssword" type="password" value="" placeholder="商家输入兑奖密码">
								</p>
								<p>
									<input class="pxbtn" name="提 交" id="save-btnn" type="button" value="商家提交">
								</p> -->
						</div>
					</div>
				</div>
				<div class="boxcontent boxwhite">
					<div class="box">
						<div class="title-brown">
							<span>
								奖项设置：
							</span>
						</div>
						<div class="Detail">
							<p>
								一等奖： 价值100元现金抵用券。奖品数量：5名
							</p>
							<p>
								二等奖： 价值50元现金抵用券 。奖品数量：10名
							</p>
							<p>
								三等奖： 价值20元现金券。奖品数量：20名
							</p>
							<p>
								参与奖： 价值100元体验课，免费体验一次30分钟。奖品数量：50名
							</p>
						</div>
					</div>
				</div>
				<div class="boxcontent boxwhite">
					<div class="box">
						<div class="title-brown">
							活动说明：
						</div>
						<div class="Detail">
							<p class="red">
								本次活动每人每天可以刮3次,机会如果没用完可以刷新页面再刮!
							</p>
							<p>
								亲，祝您好运哦！
							</p>
						</div>
					</div>
				</div>
			</div>
			<div style="clear:both;">
			</div>
		</div>
		<script src="/games/ggl/file/alert.js" type="text/javascript"></script>
		<script type="text/javascript">
		/* 	window.sncode = "null";
			window.prize = "谢谢参与";

			var zjl = true;
			var num = 0;
			var goon = false;//是否中奖 */
			/* $(function(){ 
			    $("#scratchpad").click(function(){
			        lottery(); 
			    }); 
			});
			function lottery(){
				
			} */
			var zjl = true;
			var num = 0;
			var goon = true;//是否中奖
			$(function() {
				 $.ajax({ 
			        type: 'POST', 
			        url: "<%=basePath%>/scrath/getResult.action", 
			        data:"data",
			        dataType: 'json', 
			        cache: false, 
			        error: function(){ 
			            alert('出错了！'); 
			            return false; 
			        }, 
			        success:function(json){ 
			        	//alert(json.sncode);
			        	var sncode = json.sncode;
			        	var prize = json.prize;
			        	var angle = json.angle;
			        	var msg = json.msg;
			        	if(angle=="1000"){
			        		alert("您今天的机会已经用完了，明天再来吧！");
			        	}else{
			        		$("#scratchpad").wScratchPad({
								width: 150,
								height: 40,
								color: "#a9a9a7",
								scratchMove: function() {
									$("#prize").text(prize);
									if (angle <=3 && goon) {
										/* alert("恭喜您，中得"+prize+"!"); */
										$("#prizeItem").text(prize);
										$("#sncode").text(sncode);
										goon = false;
										$("#zjl").slideToggle(500);
										//$("#outercont").slideUp(500);
										return;
									}else{
										return;
									}
								}
							});
			        		
			        	}
			        	
			        }
			   });
			});

			$("#save-btn").bind("click", function() {
				var btn = $(this);
				var tel = $("#tel").val();
				if (tel == '') {
					alert("请输入手机号");
					return
				}
				var prized = $("#prizeItem").text();
				var scno = $("#sncode").text();
				var phone = document.getElementById("tel").value;
				$hx.service("srca.saveResultAjax",[prized,scno,phone],function(result2){
					if(result2){
						location.reload();
					}
				});
			});

		
		</script>
		
	</body>

</html>